import QtQuick 2.0
import QtQuick.Controls 1.4

Rectangle {
    id: root;

    property color paintColor: colorModel[0];

    property variant colorModel: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444",
        "#FF5555", "#FF888888", "#FFAAAAAA", "#3333FF", "#0000CC", "#0033CC",
        "#0066CC"];

    color: "black";

    PathView {
        id: colorPath;

        height: 80;
        anchors.left: parent.left;
        anchors.leftMargin: 50;
        anchors.top: parent.top;
        anchors.right: parent.right;
        anchors.rightMargin: 50;


        model: colorModel;

        delegate: colorDelegate;

        path: Path {
            startX: colorPath.width*0.2;
            startY: colorPath.height/2;

            PathAttribute { name: "itemZ"; value: 0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
            PathLine { x: colorPath.width*0.5; y: colorPath.height/2;}
            PathAttribute { name: "itemZ"; value: 100; }
            PathAttribute { name: "itemScale"; value: 1.0; }
            PathLine { x: colorPath.width*0.8; y: colorPath.height/2;}
            PathAttribute { name: "itemZ"; value: 0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
        }

        //可见子项目的数量
        pathItemCount: 9;

        //当前项的显示区间
        preferredHighlightBegin: 0.5;
        preferredHighlightEnd: 0.5;
    }

    Component {
        id: colorDelegate;

        ColorButton {
            width: 60;
            height: 60;

            visible: PathView.onPath;
            scale: PathView.itemScale;
            z: PathView.itemZ;
            color: colorModel[index];
            active: root.paintColor == color;

            onClicked: {
                root.paintColor = color;
                colorPath.currentIndex = index;
            }
        }
    }

    ScrollView   {
        anchors.left: parent.left;
        anchors.top: colorPath.bottom;
        anchors.right: parent.right;
        anchors.bottom: parent.bottom;
        anchors.margins: 10;
        clip: true;

//        contentHeight: rectCanvas.height;
//        contentWidth: rectCanvas.width;

//        contentX: (width - rectCanvas.width)/2;
//        contentY: (height - rectCanvas.height)/2;

        Rectangle {
            id: rectCanvas;
            width: 1024;
            height: 1024;
            anchors.verticalCenter: parent.verticalCenter;
            anchors.horizontalCenter: parent.horizontalCenter;
            color: "white";
            border.width: 2;
            border.color: "gray";

            Canvas {
                id: canvas;
                anchors.fill: parent;

                property real lastX;
                property real lastY;
                property color color: root.paintColor;
                property var imageData: null;
                //property url img: "imga/save";

                onPaint: {
                    var ctx = getContext("2d");
                    if(imageData != null) {
                        ctx.putImageData(imageData, 0, 0, 0, 0, 800, 800);
                    }
                    ctx.lineWidth = 1.5;
                    ctx.strokeStyle = canvas.color;
                    ctx.beginPath();
                    ctx.moveTo(lastX, lastY);
                    lastX = area.mouseX;
                    lastY = area.mouseY;
                    ctx.lineTo(lastX, lastY);
                    ctx.stroke();
                    ctx.save();
                    imageData = ctx.getImageData(0, 0, 800, 800);
                }

                MouseArea {
                    id: area;
                    anchors.fill: parent;
                    onPressed: {
                        canvas.lastX = mouseX;
                        canvas.lastY = mouseY;
                    }
                    onPositionChanged: {
                        canvas.requestPaint();
                    }
                }
            }
        }
    }
}
